<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>详情</title>
  <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

  <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
        integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

  <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
  <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"
          integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
  <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
          integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  <link rel="stylesheet" type="text/css" th:href="@{/css/detail.css}">
  <link rel="stylesheet" type="text/css" th:href="@{/css/index.css}">
  <script type="application/javascript" th:src="@{/js/detail.js}"></script>
</head>

<body>
  <div th:insert="~{index::commonNav}"></div>  <!--使用th::insert，不要使用th::include，否则样式加载不出来-->
  <div class="container">
    <h3 style="margin-left: 20px" class="page-header"><b th:text="${#strings.substringBefore(movieDetail.name,'(')}"></b></h3>
    <div class="col-md-2 img-box">
      <img th:src="@{{url}(url=${movieDetail.url})}"  width="100%" />
    </div>
    <div class="col-md-5" style="margin-top: 60px; font-family: 'Dubai Medium'">
        <p>导演：<a class="info-p"  th:text="${movieDetail.directors}"></a></p>
        <p>编剧：<a class="info-p" th:text="${movieDetail.writers}"></a></p>
        <p>主演：<a class="info-p" th:text="${movieDetail.starts}"></a></p>
        <p>类型：<a class="info-p" th:text="${movieDetail.genre}"></a></p>
        <p>上映时间：<a class="info-p" th:text="${movieDetail.releaseTime}"></a></p>
        <p>片长：<a class="info-p" th:text="${movieDetail.time}"></a></p>
    </div>
    <div class="col-md-3 col-md-offset-2 total-score">
      <div class="row">
        <div class="col-md-4">
          <div style="float:left;width: 1px;height: 230px; background: darkgray;"></div>
        </div>
        <div class="col-md-4" style="padding-top: 40px">
          <span>评分：<span>4.8</span></span><hr>
          <div style="text-align: center; margin-top: 40px">
            <div class="glyphicon glyphicon-heart like-heart" onclick="likeHeartClick()"></div>
            <p>想看</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="movie-introduction">
      <p><p style="display: inline; margin-right: 0" th:text="${#strings.substringBefore(movieDetail.name,'(')}"></p>的剧情简介</p>
    </div>
    <div class="movie-outview">
      <p th:text="${movieDetail.intro}"></p>
    </div>
  </div>
  <hr>
  <div class="container" style="margin-top: 30px">
    <div class="movie-introduction">
      <p>为您推荐</p>
    </div>
    <div class="row" style="margin-left: 10px; margin-right: 10px">
      <div th:each="recommendMovie:${recommendMovies}" class="col-md-2 img-box">
        <a th:href="@{http://localhost:8081/getRec/{movieId}(movieId=${recommendMovie.id})}">
          <img th:src="@{(${recommendMovie.url})}"  width="100%" />
          <div class="movie-title">
            <p style="margin-top: 8px; font-family: Microsoft YaHei,'微软雅黑','黑体','宋体';"
               th:text="${#strings.substringBefore(recommendMovie.name,'(')}">
            </p>
          </div>
        </a>
      </div>
    </div>
  </div>
</body>
</html>